const canvas = document.querySelector('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight

const ctx = canvas.getContext('2d')
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.font = 'bold 20px sans-serif'

const planeArea = [canvas.width / 2 - 50, canvas.height - 80, 50, 50]
const shots = []
let enemyType = 1
const enemy = [[-30, 100, 45, 10, enemyType]]
let score = 0
const enemySpeed = 40

let plane = new Image()
plane.onload = () => {
  ctx.drawImage(plane, planeArea[0], planeArea[1], planeArea[2], planeArea[3])
}
plane.src = 'plane.jpg'

function simpleEnemy() {
  for (let ptr in enemy) {
    ene = enemy[ptr]
    if (ene[4] < 3) {
      ctx.fillStyle = '#000000'
      ctx.fillRect(ene[0], ene[1], ene[2], ene[3])
      ene[0] += enemySpeed
      if (ene[0] < canvas.width) {
        ctx.fillStyle = '#6cffe2'
        ctx.fillRect(ene[0], ene[1], ene[2], ene[3])
      } else {
        enemy.splice(ptr, 1)
        ptr--
      }
    }
  }
}

function betterEnemy() {
  for (let ptr in enemy) {
    ene = enemy[ptr]
    if (ene[4] > 2 && ene[4] < 5) {
      ctx.fillStyle = '#000000'
      ctx.fillRect(ene[0], ene[1], ene[2], ene[3])
      ene[0] += enemySpeed
      if (ene[0] < canvas.width) {
        ctx.fillStyle = '#d06fed'
        ctx.fillRect(ene[0], ene[1], ene[2], ene[3])
      } else {
        enemy.splice(ptr, 1)
        ptr--
      }
    }
  }
}

function bestEnemy() {
  for (let ptr in enemy) {
    ene = enemy[ptr]
    if (ene[4] == 5) {
      ctx.fillStyle = '#000000'
      ctx.fillRect(ene[0], ene[1], ene[2], ene[3])
      ene[0] += enemySpeed
      if (ene[0] < canvas.width) {
        ctx.fillStyle = '#ff0000'
        ctx.fillRect(ene[0], ene[1], ene[2], ene[3])
      } else {
        enemy.splice(ptr, 1)
        ptr--
      }
    }
  }
}

window.setInterval(() => {
  if (enemyType == 6) {
    enemyType = 0
  }
  if (enemyType < 3) {
    enemy.unshift([-enemySpeed, 100, 45, 10, enemyType])
  } else if (enemyType < 5) {
    enemy.unshift([-enemySpeed, 120, 45, 10, enemyType])
  } else {
    enemy.unshift([-enemySpeed, 80, 45, 10, enemyType])
  }
  enemyType++
}, 4000)

let enemyTimer1 = window.setInterval(simpleEnemy, 1000)
let enemyTimer2 = window.setInterval(betterEnemy, 500)
let enemyTimer3 = window.setInterval(bestEnemy, 300)

window.setInterval(() => {
  ctx.fillStyle = '#000000'
  ctx.fillRect(0, 0, canvas.width, 40)
  ctx.fillStyle = '#ffffff'
  ctx.fillText('Score: ' + score, 10, 20)

  for (let ptr in shots) {
    let bomb = false
    let shot = shots[ptr]
    for (let enePtr in enemy) {
      let x = shot[0]
      let y = shot[1]
      let w = Math.abs(shot[0] + shot[2] / 2 - (enemy[enePtr][0] + enemy[enePtr][2] / 2))
      let h = Math.abs(shot[1] + shot[3] / 2 - (enemy[enePtr][1] + enemy[enePtr][3] / 2))
      if (w < (shot[2] + enemy[enePtr][2]) / 2 && h < (shot[3] + enemy[enePtr][3]) / 2) {
        clearInterval(enemyTimer1)
        clearInterval(enemyTimer2)
        clearInterval(enemyTimer3)
        ctx.fillStyle = '#000000'
        ctx.fillRect(shot[0], shot[1], shot[2], shot[3])
        ctx.fillRect(enemy[enePtr][0], enemy[enePtr][1], enemy[enePtr][2], enemy[enePtr][3])
        if (enemy[enePtr][4] < 3) {
          score++
        } else if (enemy[enePtr][4] < 5) {
          score += 3
        } else {
          score += 5
        }
        shots.splice(ptr, 1)
        enemy.splice(enePtr, 1)
        ptr--
        bomb = true
        ctx.fillStyle = '#ff0000'
        ctx.beginPath()
        ctx.arc(x, y, 20, 0, 2 * Math.PI, true)
        ctx.fill()
        setTimeout(() => {
          ctx.fillStyle = '#000000'
          ctx.beginPath()
          ctx.arc(x, y, 20, 0, 2 * Math.PI, true)
          ctx.fill()
        }, 500)
        enemyTimer1 = window.setInterval(simpleEnemy, 1000)
        enemyTimer2 = window.setInterval(betterEnemy, 500)
        enemyTimer3 = window.setInterval(bestEnemy, 300)
        break
      }
    }
    if (bomb) {
      continue
    }
    ctx.fillStyle = '#000000'
    ctx.fillRect(shot[0], shot[1], shot[2], shot[3])
    ctx.fillStyle = '#ffff00'
    shot[1] -= 10
    if (shot[1] < 0) {
      shots.splice(ptr, 1)
      ptr--
    }
    else {
      ctx.fillRect(shot[0], shot[1], shot[2], shot[3])
    }
  }
}, 80)
document.addEventListener('keydown', event => {
  const key = event.keyCode
  switch (key) {
    case 37:
      if (planeArea[0] - 15 >= 0) {
        ctx.fillStyle = '#000000'
        ctx.fillRect(planeArea[0], planeArea[1], planeArea[2], planeArea[3])
        planeArea[0] -= 15
        ctx.drawImage(plane, planeArea[0], planeArea[1], planeArea[2], planeArea[3])
      }
      break
    case 38:
      if (planeArea[1] - 15 >= 250) {
        ctx.fillStyle = '#000000'
        ctx.fillRect(planeArea[0], planeArea[1], planeArea[2], planeArea[3])
        planeArea[1] -= 15
        ctx.drawImage(plane, planeArea[0], planeArea[1], planeArea[2], planeArea[3])
      }
      break
    case 39:
      if (planeArea[0] + 15 <= canvas.width) {
        ctx.fillStyle = '#000000'
        ctx.fillRect(planeArea[0], planeArea[1], planeArea[2], planeArea[3])
        planeArea[0] += 15
        ctx.drawImage(plane, planeArea[0], planeArea[1], planeArea[2], planeArea[3])
      }
      break
    case 40:
      if (planeArea[1] + 15 <= canvas.height) {
        ctx.fillStyle = '#000000'
        ctx.fillRect(planeArea[0], planeArea[1], planeArea[2], planeArea[3])
        planeArea[1] += 15
        ctx.drawImage(plane, planeArea[0], planeArea[1], planeArea[2], planeArea[3])
      }
      break
    case 32:
      shots.push([planeArea[0] + planeArea[2] / 2 - 5, planeArea[1] - 20, 10, 20])
      ctx.fillStyle = '#ffff00'
      ctx.fillRect(planeArea[0] + planeArea[2] / 2 - 5, planeArea[1] - 20, 10, 20)
  }
})